<template>
	<view class="pt-2">
		<!-- 金刚区 -->
		<!-- <view class="navbox bj_fff">
		    <view class="li" @click="get_link('cases')">
		        <view class="img"><image src="@/static/img/indexnav/nav1.png" mode="aspectFill"></image></view>
		        <view class="name">追剧</view>
		    </view>
		    <view class="li" @click="get_link('custom?type=news')">
		        <view class="img"><image src="@/static/img/indexnav/nav2.png" mode="aspectFill"></image></view>
		        <view class="name">最新</view>
		    </view>
		    <view class="li" @click="get_link('custom')">
		        <view class="img"><image src="@/static/img/indexnav/nav3.png" mode="aspectFill"></image></view>
		        <view class="name">排行</view>
		    </view>
		    <view class="li" @click="get_link('custom?type=free')">
		        <view class="img"><image src="@/static/img/indexnav/nav4.png" mode="aspectFill"></image></view>
		        <view class="name">免费</view>
		    </view>
		</view> -->
		<!-- 推荐模块 -->
		<view class="indexlistbox"> 
		    <view class="qjtitle">
		        <view class="icon"><image src="@/static/img/indexnav/cnxh.png" mode="aspectFill"></image></view>
		        <view class="h2">热门推荐</view>
		        <!-- <view class="sub">每日推荐热门短剧</view> -->
		    </view>
		    <view class="list">
		        <view v-for="(item,index) in row.reco" :key="index" class="li" @click="get_play_url(item.id)">
		            <view class="kzdk">
		                <view class="imgbox">
		                    <view class="img"><image :src="item.pic" mode="aspectFill"></image></view>
		                </view>
		                <view class="name">{{item.name}}</view>
						<view class="truncate text-sm text-gray-400 text-center" style="width:200rpx;">{{computedNav(item.cid)}} {{item.state}}</view>
		            </view>
		        </view>
		    </view>
		</view>
		<!-- 排行榜 -->
		<view class="indexlistbox">
		    <view class="qjtitle">
		        <view class="icon"><image src="@/static/img/indexnav/nav3.png" mode="aspectFill"></image></view>
		        <view class="h2">排行榜</view>
		        <!-- <view class="sub">本周热播TOP3</view> -->
		    </view>
		    <view class="list">
		        <view v-for="(item,index) in row.hot" :key="index" class="li" @click="get_play_url(item.id)">
		            <view class="kzdk">
		                <view class="imgbox">
		                    <view class="img"><image :src="item.pic" mode="aspectFill"></image></view>
		                </view>
		                <view class="name">{{item.name}}</view>
						<view class="truncate text-sm text-gray-400 text-center" style="width:200rpx;">{{computedNav(item.cid)}} {{item.state}}</view>
		            </view>
		        </view>
		    </view>
		</view>
		<!-- 最新更新 -->
		<view class="indexlistbox">
		    <view class="qjtitle">
		        <view class="icon"><image src="@/static/img/indexnav/nav1.png" mode="aspectFill"></image></view>
		        <view class="h2">最新更新</view>
		        <!-- <view class="sub">每日更新追剧不断</view> -->
		    </view>
		    <view class="list">
		        <view v-for="(item,index) in row.news" :key="index" class="li" @click="get_play_url(item.id)">
		            <view class="kzdk">
		                <view class="imgbox">
		                    <view class="img"><image :src="item.pic" mode="aspectFill"></image></view>
		                </view>
		                <view class="name">{{item.name}}</view>
						<view class="truncate text-sm text-gray-400 text-center" style="width:200rpx;">{{computedNav(item.cid)}} {{item.state}}</view>
		            </view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	let app = getApp(),
		that = null;
	export default {
		computed:{
			// 返回分类类型
			computedNav(){
				return (cid)=>{
					let navList = uni.getStorageSync('nav-list');
					let obj = navList.find(item=>item.id == cid)
					return obj.name
				}
			}
			
		},
		data() {
			return {
				swiper:{
					list:[]
				},
				row:''
			}
		},
		mounted() {
			that = this;
			// 获取首页数据
			this.getInit()
		},
		methods: {
			// 点击播放跳转
			get_play_url(id){
				let url = 'play?id='+id;
				// #ifdef APP-PLUS
					url = 'aplay?id='+id;
				// #endif
				that.get_link(url);
			},
			// 点击跳转
			get_link(url){
				if(url == 'cases'){
					uni.switchTab({
						url: '/pages/'+url
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/'+url
				});
			},
			// 获取首页数据
			getInit(){
				let req = {}
				uni.$u.http.get('/index/home', req).then(res => {
					if (res.code == 1) {
						this.row = res.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
/* 金刚区 */
.navbox{width: calc(100% - 32px);margin: 0 auto;padding-top: 6px;box-shadow: 0px 2px 16px 0px rgba(0,0,0,.04);border-radius: 5px;display: flex;justify-content: space-between;}
.navbox .li{width: 25%;height: 75px;display: inline-block;cursor: pointer;}
.navbox .li .img{width: 50px;height: 50px;margin: 0 auto;}
.navbox .li .img image{width: 100%;height: 100%;object-fit: cover;}
.navbox .li .name{font-size: 14px;font-weight: 600;text-align: center;}
/* 全局qjtitle */
.qjtitle{width: 100%;height: 30px;position: relative;}
.qjtitle .icon{width: 20px;height: 20px;display: inline-block;vertical-align: middle;margin-right: 10px;}
.qjtitle .icon image{width: 100%;height: 100%;object-fit: cover;}
.qjtitle .h2{font-size: 16px;font-weight: 600;display: inline-block;vertical-align: middle;line-height: 30px;}
.qjtitle .sub{font-size: 14px;color: #999;line-height: 30px;position: absolute;top: 0;right: 0;}
 /* 首页模块 */
.indexlistbox{width: calc(100% - 32px);margin: 0 auto;margin-top: 16px;}
.indexlistbox .list{width: 100%;display: flex;justify-content: revert;flex-wrap:wrap;}
.indexlistbox .list .li{width: calc(33.333% - 11px);background: #fff;position: relative;border-radius: 8px;overflow: hidden;margin-right: 16px;margin-top: 16px;cursor: pointer;box-shadow: 0px 2px 16px 0px rgba(0,0,0,.04);}
.indexlistbox .list .li:nth-child(3n){margin-right: 0;}
.indexlistbox .list .li .kzdk{width: 100%;display: block;}
.indexlistbox .list .li .kzdk .imgbox{position: relative;width: 100%;padding-bottom: 120%;background: #f2f2f2;}
.indexlistbox .list .li .kzdk .imgbox .img{width: 100%;height: 100%;margin: 0 auto;position: absolute;overflow: hidden;}
.indexlistbox .list .li .kzdk .imgbox .img image{width: 100%;height: 100%;object-fit: cover;}
.indexlistbox .list .li .kzdk .name{padding: 0 5px;font-size: 14px;font-weight: 400;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 30px;text-align: center;}

</style>